<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="俱乐部排行" />
      <scroll-view scroll-y class="scroll-view-content">
        <view class="tabs">
          <view v-for="(tab, idx) in tabs" :key="tab" :class="['tab', { active: activeTab === idx }]"
            @click="tabClick(tab, idx)">{{ tab.name }}</view>
        </view>
        <!-- 国家筛选 -->
        <view class="filter-row">
          <text class="filter-label">国家：</text>
          <picker :range="countryList" class="country-picker">
            <view class="country-value">{{ countryList[countryIndex] }}</view>
          </picker>
        </view>
        <!-- 表头 -->
        <view class="table-header">
          <text class="th club-name">俱乐部名称</text>
          <text class="th project">全部项目</text>
          <picker :range="countryList" class="country-picker">
            <view class="country-value">{{ countryList[countryIndex] }}</view>
          </picker>
          <view class="th score" v-if="activeTab === 0">积分
            <image :src="imgUrl + 'question@2x.png'" class="sort-icon" />
          </view>
          <view class="th score" v-if="activeTab === 1">奖牌榜
            <image :src="imgUrl + 'question@2x.png'" class="sort-icon" />
          </view>
          <view class="th score" v-if="activeTab === 2">金牌榜
            <image :src="imgUrl + 'question@2x.png'" class="sort-icon" />
          </view>
          <view class="th score" v-if="activeTab === 3">附近
            <image :src="imgUrl + 'question@2x.png'" class="sort-icon" />
          </view>
        </view>
        <!-- 俱乐部列表 -->
        <view class="club-list">
          <view v-for="(club, idx) in clubList" :key="club.name + idx" class="club-item" @click="goClubDetails(club)">
            <view class="rank">
              <!-- <image v-if="idx === 0" :src="imgUrl + 'firstPlace@2x.png'" class="medal" />
              <image v-else-if="idx === 1" :src="imgUrl + 'runner-up@2x.png'" class="medal" />
              <image v-else-if="idx === 2" :src="imgUrl + 'thirdPlace@2x.png'" class="medal" />
              <text v-else>{{ idx + 1 }}</text> -->
              <image v-if="club.rank <= 3" class="medal" :src="getMedalIcon(club.rank)" />
              <text v-else class="rank-num">{{ club.rank }}</text>
            </view>
            <image :src="club.logo" class="club-logo" />
            <text class="club-name-text">{{ club.name }}</text>
            <text class="project-text">-</text>
            <text class="score-text" v-if="activeTab === 0">{{ club.points }}</text>
            <text class="score-text" v-if="activeTab === 1">{{ club.club_total_medal }}</text>
            <text class="score-text" v-if="activeTab === 2">{{ club.gold_medal }}</text>
            <text class="score-text" v-if="activeTab === 3">{{ club.juli ? (club.juli / 1000).toFixed(2) : '---'
              }}km</text>
          </view>
        </view>
      </scroll-view>
      <!-- 占位防止底部被遮挡 -->
      <view style="height: 100rpx"></view>
      <!-- 底部按钮 -->
      <view class="footer-bar" @click="goCreateClub">
        <button class="create-btn">创建俱乐部</button>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { onShow } from '@dcloudio/uni-app'
  import { useRequest } from '@/api'
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const { API_CLUB_INDEX_POST } = useRequest()
  const tab_type = ref('points')
  const lng = ref('')
  const lat = ref('')
  const tabs = ref([
    {
      type: 'points',
      name: '积分榜'
    },
    {
      type: 'club_total_medal',
      name: '奖牌榜'
    },
    {
      type: 'gold_medal',
      name: '金牌榜'
    },
    // {
    //   type: 'silver_medal',
    //   name: '银牌榜'
    // },
    // {
    //   type: 'club_bronze_medal',
    //   name: '铜牌榜'
    // },
    {
      type: 'juli',
      name: '附近'
    }
  ])
  const activeTab = ref(0)
  const countryList = ['全部', '中国', '美国', '日本']
  const countryIndex = ref(0)
  const clubList = ref([])
  function getMedalIcon(rank) {
    const icons = {
      1: imgUrl + 'firstPlace@2x.png',
      2: imgUrl + 'runner-up@2x.png',
      3: imgUrl + 'thirdPlace@2x.png'
    }
    return icons[rank]
  }
  onShow(() => {
    lng.value = uni.getStorageSync('longitude')
    lat.value = uni.getStorageSync('latitude')
    if (lng.value && lat.value) {
      getClubRanking()
    }
  })
  const getClubRanking = async () => {
    let params = {
      tab: tab_type.value,
      lng: lng.value,
      lat: lat.value
    }
    clubList.value = []
    try {
      const res = await API_CLUB_INDEX_POST(params)
      console.log('getClubRanking', res)

      if (res.code === 1) {
        if (res.data.data.length > 0) {
          clubList.value = res.data.data
        } else {
          clubList.value = []
        }
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
      console.log('clubList', clubList.value)
    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
  const tabClick = (tab, idx) => {
    activeTab.value = idx
    tab_type.value = tab.type
    getClubRanking()
  }
  const goClubDetails = (club) => {
    uni.navigateTo({
      url: `/pages/ClubDetailCard/index?id=${club.id}`
    })
  }
  const goCreateClub = () => {
    uni.navigateTo({
      url: '/pages/clubRanking/joinTheClub'
    })
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style></style>